<template>
  <div class="userinfo">
    <h3>个人资料页</h3>
    <van-row tag="div">
      <van-col span="18">头像</van-col>
      <van-col span="6">
        <van-image
          width="60px"
          height="45px"
          round
          :src="userInfo.avatar?userInfo.avatar:img|diaImg"
        /></van-col>
    </van-row>
    <van-row tag="div">
      <van-col span="18">用户名</van-col>
      <van-col span="6">{{ userInfo.userName }}</van-col>
    </van-row>
    <van-row tag="div">
      <van-col span="18">昵称</van-col>
      <van-col span="6">{{ userInfo.nickName }}</van-col>
    </van-row>
    <van-row tag="div">
      <van-col span="18">年龄</van-col>
      <van-col span="6">{{ userInfo.age }}</van-col>
    </van-row>
    <van-row tag="div">
      <van-col span="18">性别</van-col>
      <van-col span="6">{{ userInfo.gender }}</van-col>
    </van-row>
    <van-row tag="div">
      <van-col span="18">地区</van-col>
      <van-col span="6">{{ userInfo.area }}</van-col>
    </van-row>

    <van-row tag="div">
      <van-col span="18">注册时间</van-col>
      <van-col span="6">{{ userInfo.createdAt | forTime }}</van-col>
    </van-row>


  </div>
</template>

<script>
import moment from "moment";
// import { mapActions } from "vuex";
// import {mapState} from "vuex"
export default {
  data() {
    return {
      // 格式化时间的时候使用
      time: "",
      img:"https://img2.baidu.com/it/u=4274144176,1031990689&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=674"
    };
  },

  created() {
     this.$store.dispatch("userinfo/getUser");
    //  this.loadData();
  },
  // 在挂载完毕之后执相当于在dom元素加载完后执行或者不用这种办法用全局定义的时间过滤器
  mounted() {
    this.time = moment(this.userInfo.createdAt).format("YYYY-MM-DD");
    console.log(this.userInfo.createdAt);
  },
  computed: {
    //  ...mapState("userinfo", ["userInfo"]),
     userInfo:{
         get() {
            return this.$store.state["userinfo"].userInfo;
         },
         set(v) {
             this.$store.state["userinfo"].userInfo = v;
         }
     }
  },
  methods: {
    // 加上async可以让异步函数按顺序执行
    // async loadData() {
    //   await this.getUser();
    // },
    // ...mapActions("userinfo", {
    //   // 获取用户信息
    //   getUser: "getUser",
    // }),
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  padding: 0 10px;
  margin: 10px 0;
  font-weight: 400;
}
</style>
